<template>
  <el-container class="full-container">
    <el-aside class="">
      <el-tree
        ref="tree"
        :data="treedata"
        :props="defaultProps"
        :expand-on-click-node="false"
        :highlight-current="true"
        node-key="id"
        default-expand-all
        @node-click="handleNodeClick" >

        <span slot-scope="{node,data}" class="custom-tree-node">

          <span>{{ data.name }}</span>
        </span>
      </el-tree>
      <a class="aside-toggle"/>
    </el-aside>

    <div style="width:100% ">
      <el-button size="mini" style="margin-left:20px;" type="primary" @click="handleAdd()">新增</el-button>
      <el-table
        ref="mytable"
        :data="table_data"
        border
        highlight-current-row
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column v-if="radio" type="index" width="50"/>
        <!--  <el-table-column v-if="selection" type="selection" width="55"/> -->
        <el-table-column
          v-for="(item,index,key) in table_columns"
          :item="item"
          :key="key"
          :index="index"
          :label="item.label"
          align="center"
        >
          <template slot-scope="scope">
            <template v-if="item.prop === 'fdeletedstr'">
              <el-checkbox v-model="scope.row[item.prop]" @change="handleCheckedChange" />
            </template>
            <template v-else>
              <el-input
                v-if=" scope.row.edit"
                v-model="scope.row[item.prop]"
                :placeholder="'请输入'+item.label"
                size="small"
              />
              <span v-if=" !scope.row.edit">{{ scope.row[item.prop] }}</span>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <!-- 全局控制的编辑 -->
            <div v-if="is_edit&&scope.row.add==undefined" style="display: inline-block;">
              <!-- 编辑 -->
              <el-button
                v-if="!scope.row.edit"
                size="mini"
                type="primary"
                @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button>
              <!-- 保存 -->
              <el-button
                v-if="scope.row.edit"
                :plain="true"
                size="mini"
                type="success"
                @click="handleSave(scope.$index, scope.row)"
              >保存</el-button>
            </div>
            <!-- 添加控制 -->
            <div v-if="scope.row.add!=undefined&&scope.row.add" style="display: inline-block;">
              <!-- 保存 -->
              <el-button
                v-if="scope.row.edit"
                :plain="true"
                size="mini"
                type="success"
                @click="handleSave(scope.$index, scope.row)"
              >保存</el-button>
            </div>
            <!-- 全局控制删除 -->
            <el-button
              v-if="is_delete&&scope.row.add==undefined"
              :plain="true"
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-container>
</template>

<script>
let opername = ''
import { getFuzhizl, editFuzhizl, delfuzhuziliao } from '../../api/salary'
import { common } from '../../mixins/common'
import { pagination } from '../../mixins/pagination'
export default {
  mixins: [common, pagination],
  data() {
    return {
      opername: '',
      treedata: [{
        id: '1001',
        name: '辅助资料',
        children: [{
          id: '23',
          name: '文化程度(23)'

        }, {
          id: '29',
          name: '职务(29)'

        }, {
          id: '26',
          name: '区域(26)'

        }, {
          id: '30',
          name: '部门(30)'

        }, {
          id: '102',
          name: '性别(102)'

        }, {
          id: '200',
          name: '在职状态(200)'

        }, {
          id: '301',
          name: '单位名称(301)'

        }, {
          id: '302',
          name: '公司名称(302)'

        }, {
          id: '303',
          name: '币种(303)'

        }
        ]
      }
      ],

      new_date_json: {}, // 数据结构
      multipleSelection: [], // 复选框，数据
      btnTableData: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      isaddedit: 0,
      is_edit: true, // 是否可编辑
      is_delete: true, // 是否可删除
      selection: true, // 是否需要复选框
      radio: false, // 单选变色
      space_color: true, // 隔行变色

      fkey: 0,
      // 表头信息
      table_columns: [
        {
          prop: 'fid',
          label: '代码',
          width: '150'
        },
        {
          prop: 'fname',
          label: '名称',
          width: '150'
        },
        {
          prop: 'fdeletedstr',
          label: '禁用',
          width: '150'
        }

      ],
      // 表格数据
      table_data: [

      ]
    }
  },
  watch: {
    space_color: function() {
      // 监听数据变化
      this.$nextTick(function() {
        // ///方法
        this.tableRowClassName()
      })
    },
    table_data: function() {
      // 监听数据变化f
      this.$nextTick(function() {
        // ///方法
      //  this.tableRowClassName()
      })
    }
  },
  mounted: function() {
    opername = decodeURIComponent(this.globalDb.fname)
    this.opername = decodeURIComponent(this.globalDb.fname)
    this.handleNodeClick({ id: 23 })
    // this.initEditAttribute()
    // 确保方法在页面渲染后调用
    this.$nextTick(function() {
      // ///方法
      // this.tableRowClassName()
    })
  },
  methods: {
    // 隔行变色
    tableRowClassName() {
      // 选取DOM节点
      var trs = this.$refs.mytable.$el
        .getElementsByTagName('tbody')[0]
        .getElementsByTagName('tr')
      for (var i in trs) {
        if (i % 2 === 0) {
          // 当隔行变色未true时改变颜色
          if (this.space_color) {
            trs[i].style.backgroundColor = '#f0f9eb'
          } else {
            trs[i].style.backgroundColor = ''
          }
        }
      }
    },
    handleCheckedChange(value) {
      // console.log(value, 7878787)
    },

    async  handleNodeClick(obj, node, data) {
      const id = obj.id
      this.fkey = obj.id
      try {
        const res = await getFuzhizl({
          db: this.globalDb.db,
          opername: decodeURIComponent(this.globalDb.fname),
          key: id
        })
        this.table_data = []
        this.btnTableData = res.Data
        if (this.btnTableData.length > 0) {
        // 添加编辑事件
          for (var index in this.btnTableData) {
            this.btnTableData[index]['edit'] = false
            this.table_data.push(this.btnTableData[index])
          }

          if (Object.keys(this.new_date_json).length === 0) {
          // 新增时，初始化数据结构
            this.initAddDataJson(this.btnTableData[0])
          }
        }
      } catch (error) {
        // console.log(error)
      }
    },

    // 多选框
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 编辑
    handleEdit(index, row) {
      row.edit = true
      this.isaddedit = 2
    },
    // 删除
    async handleDelete(index, row) {
      this.table_data.splice(index, 1)
      await delfuzhuziliao({
        db: this.globalDb.db,
        opername,
        row: row,
        isaddedit: this.isaddedit
      })
      this.$message({
        message: '删除成功！',
        type: 'success'
      })
    },
    // 保存
    async  handleSave(index, row) {
      row.edit = false

      await editFuzhizl({
        db: this.globalDb.db,
        opername,
        row: row,
        isaddedit: this.isaddedit
      })

      this.$message({
        message: '保存成功！',
        type: 'success'
      })
      this.handleNodeClick({ id: this.fkey })
    },
    // 新增
    handleAdd() {
      var addDataJson = {}

      for (var key in this.new_date_json) {
        if (key === 'edit') {
          delete addDataJson[key]
        } else if (key === 'add') {
          delete addDataJson[key]
        } else {
          addDataJson[key] = ''
        }
      }
      this.isaddedit = 1
      addDataJson.edit = true
      addDataJson.add = true
      addDataJson.ftypeid = this.fkey
      addDataJson.fdeletedstr = false

      this.table_data.push(addDataJson)
    },
    // 初始化编辑属性
    initEditAttribute() {

    },
    initAddDataJson(dataArray) {
      // 新增时，初始化数据结构
      var dataJson = dataArray
      var newDateJson = {}
      for (var key in dataJson) {
        if (key === 'edit') {
          newDateJson[key] = 'true'
        } else {
          newDateJson[key] = ''
        }
      }
      newDateJson['add'] = true
      this.new_date_json = newDateJson
    }
  }
}
</script>
<style scoped>
</style>
